<template>
    <div class="platformContainer">
        <div class="content">
            <el-descriptions title="壁纸政策" :colon="false">
            </el-descriptions>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="本地上传" name="first">
                    <el-form :inline="true" :model="formInline" label-width="1.75rem">
                        <el-form-item>
                            <el-upload action="#" list-type="picture-card" :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="input" placeholder="图片名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary">添加</el-button>
                            <el-button>重置</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="img_box">
                        <div class="img_content">
                            <span>已逾期</span>
                            <img src="../../../assets/img/yiyuqi.jpg">
                            <el-button type="text" style="color: red;"><i class="el-icon-delete"></i>删除</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1'
                }
            ],
            activeName: 'first'
        }
    },
    methods: {

    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: 0 !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}

form.el-form.el-form--inline{
    display: flex;
    align-items: center;
}

.img_box {
    padding: .25rem 0;
}

.img_content {
    display: flex;
    flex-direction: column;
    width: 200px;
    justify-content: center
}

.img_content img {
    padding: .125rem 0;
}

.img_content span {
    text-align: center;
}
</style>